import React, { useEffect, useState, Key } from "react";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { Card, Row, Col, Tree, Tag, Pagination, Table, Button } from "antd";
// 引入api请求
import {
  hospitalDepartmentDataRequest,
  getRuleDataRequest,
  getWorkDateRequest,
} from "@/api/hospital/hospitalList";
// 引入类型
import {
  hospitalDepartmentReturnType,
  getRuleDataType,
  bookingScheduleListType,
  getWorkReturnDateRequest,
} from "@/api/hospital/model/hospitalListTypes";
export default function HospitalSchedue() {
  // 获得当前点击时的hoscode
  const { hoscode } = useParams();
  const navigate = useNavigate();
  // 定义一个控制treeData的state
  const [treeData, setTreeData] = useState<hospitalDepartmentReturnType>();
  //定义一个时间排班规则的当前页码
  const [page, setPage] = useState(1);
  //定义一个时间排班规则的每页条数
  const [limit, setLimit] = useState(3);
  //定义当前科室的排班规则
  const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType>([]);
  //定义当前科室的排班规则总条数
  const [total, setTotal] = useState(0);
  //定义表格的数据
  const [sourceData, setSourceData] = useState<getWorkReturnDateRequest>([]);

  //定义表格的数据
  // 进入页面时发送请求数据获取数据
  useEffect(() => {
    const res = async () => {
      const getDepartment = await getDepartmentData();
      // 将当前的id给他传过去
      const initDepcode = (
        getDepartment[0].children as hospitalDepartmentReturnType
      )[0].depcode;
      const getRuleReturn = await getRuleData(initDepcode);
      //4.根据排班列表,得到初始的排班列表的时间(默认第一个)
      const initWordDate = getRuleReturn.bookingScheduleList[0].workDate;
      await getWorkDate(initWordDate, initDepcode);
    };
    res();
  }, [page, scheduleRule, treeData]);
  //1.请求科室管理的函数
  const getDepartmentData = async () => {
    const re = await hospitalDepartmentDataRequest(hoscode as string);
    setTreeData(re);
    return re;
  };
  // 2.获取排班规则数据的函数
  const getRuleData = async (depcode: string) => {
    const re = await getRuleDataRequest(
      page,
      limit,
      hoscode as string,
      depcode
    );
    setTotal(re.total);
    setScheduleRule(re.bookingScheduleList);
    return re;
  };

  // 3.获取获取workDate排班日期的排班详细列表
  const getWorkDate = async (workDate: string, depCode: string) => {
    const re = await getWorkDateRequest(hoscode as string, depCode, workDate);
    setSourceData(re);
  };
  // 回调函数
  //1.改变页码的事件回调函数
  const changePageHandle = (page: number, limit: number) => {
    setPage(page);
    setLimit(limit);
  };

  //2.点击tree的事件回调函数
  const treeChange = (_: any, e: { node: any }) => {
    console.log(e);

    // setTreeData(e.node.depcode);
  };

  //3.点击事件的时间回调函数
  const scheduleRuleHandle = (workDate: string) => {
    return () => {
      // setWorkDate(workDate);
    };
  };
  // 样式
  const treeStyle = {
    border: "1px solid #000",
    height: "480px",
    overflow: "auto",
  };
  //table结构
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber",
    },
    {
      title: "挂号费用",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];
  return (
    <Card>
      <p>选择: 北京协和医院/XXXXXX/XXXXXX</p>
      <Row gutter={20}>
        <Col span={5}>
          <div>
            <Tree
              //antd目前没有很好的解决treeData修改字段后的类型控制,临时解决方案是断言为[]
              treeData={treeData as []}
              style={treeStyle}
              fieldNames={{ title: "depname", key: "depcode" }}
              // expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
              onSelect={treeChange}
            />
          </div>
        </Col>
        <Col span={19}>
          <div style={{ marginBottom: "20px" }}>
            {scheduleRule.map((item) => {
              return (
                <Tag
                  key={item.workDate}
                  onClick={scheduleRuleHandle(item.workDate)}
                  style={{ cursor: "pointer" }}
                >
                  <p>{item.workDate}</p>
                  <p>
                    {item.availableNumber}/{item.reservedNumber}
                  </p>
                </Tag>
              );
            })}
          </div>
          <Pagination
            current={page}
            pageSize={limit}
            total={total}
            onChange={changePageHandle}
          />

          <Table
            columns={columns}
            style={{ marginTop: "20px" }}
            dataSource={sourceData}
            rowKey={"id"}
            bordered
            pagination={false}
          ></Table>

          <Button
            onClick={() => {
              navigate(-1);
            }}
            style={{ marginTop: "30px" }}
          >
            返回
          </Button>
        </Col>
      </Row>
    </Card>
  );
}
